<template>
  <div class="musicList">
    <div class="musicList-header">
      <div class="title">发现好歌单</div>
      <div class="more">查看更多</div>
    </div>
    <div class="mlist-content">
      <router-link tag="div" :to="{ path: 'listview', query: { id: item.id} }" class="mlist-item" v-for="(item, index) in mList.value" :key="index">
        <div class="img-wrap">
          <img :src="item.picUrl" alt="" />
          <div class="count">
            <i class="iconfont icon-24gl-play"></i>
            {{ item.playCount }}
          </div>
        </div>
        <div class="name">{{ item.name }}</div>
      </router-link>
    </div>
  </div>
</template>

<script>
import { reactive, onMounted } from "vue";
import { getPersonalized } from "../../request/api.js";
export default {
  name: "musicList",
  setup(props) {
    const mList = reactive({ value: [] });
    onMounted(async () => {
      const res = await getPersonalized({ limit: 10});
      console.log(res);
      mList.value = res.result.map((item) => {
        if (item.playCount >= 100000000) {
          item.playCount = (item.playCount / 100000000).toFixed(2) + "亿";
        } else if (item.playCount >= 10000) {
          item.playCount = (item.playCount / 10000).toFixed(2) + "万";
        }
        return item;
      });
    });
    return { mList };
  },
  // data() {
  //   return {
  //     mList: [],
  //   };
  // },
  // created() {
  //   this.getMlist();
  // },
  // methods: {
  //   async getMlist() {
  //     const res = await getPersonalized();
  //     console.log(res);
  //     this.mList = res.result.map((item) => {
  //       if (item.playCount >= 100000000) {
  //         item.playCount = (item.playCount / 100000000).toFixed(2) + "亿";
  //       } else if (item.playCount >= 10000) {
  //         item.playCount = (item.playCount / 10000).toFixed(2) + "万";
  //       }
  //       return item;
  //     });
  //   },
  // },
};
</script>

<style lang="less" scoped>
.musicList {
  margin-top: 0.6rem;
  .musicList-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.2rem 0.2rem;
    .title {
      font-weight: 700;
    }
    .more {
      padding: 0 0.1rem;
      font-size: 0.18rem;
      border: 1px solid rgba(0, 0, 0, 0.2);
      border-radius: 0.2rem;
    }
  }

  .mlist-content {
    display: flex;
    width: 7.2rem;
    overflow: auto;
    margin: 0 auto;
    .mlist-item {
      display: flex;
      flex-direction: column;
      width: 5rem;
      margin-right: 0.2rem;

      &:last-child {
        margin-right: 0;
      }
      .img-wrap {
        position: relative;
        width: 2.1rem;
        .count {
          position: absolute;
          top: 0.06rem;
          right: 0.1rem;
          display: flex;
          align-items: center;
          font-size: 0.22rem;
          color: #fff;

          .iconfont {
            font-size: 0.1rem;
          }
        }

        img {
          border-radius: 0.2rem;
          width: 100%;
          height: 100%;
        }
      }

      .name {
        font-size: 0.26rem;
        overflow: hidden;
        display: -webkit-box;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
    }
    // 隐藏滚动条
    &::-webkit-scrollbar {
      display: none;
      // background-color: transparent;
    }
  }
}
</style>
